<script setup>
import { ref, computed } from 'vue'
import { mockUserData } from '@/mock/userMock.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, View } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/pages/user.js'

// 原始表格数据
const originalTableData = ref(mockUserData)

// 搜索结果数据
const searchResults = ref([])
// 是否正在加载
const loading = ref(false)
// 是否已执行过搜索
const hasSearched = ref(false)

// 表格引用
const tableRef = ref()

// 搜索关键字
const input = ref('')

// 编辑对话框显示控制
const editDialog = ref(false)

// 添加对话框显示控制
const addDialog = ref(false)

// 控制是否显示原密码
const showOriginalPassword = ref(false)

// 获取当前登录用户信息
const userStore = useUserStore()
const currentUser = computed(() => userStore.user || { id: 1, roleName: 'SUPER_ADMIN' })

// 编辑表单数据
const editForm = ref({
  id: '',
  avatar: '',
  username: '',
  password: '',
  roleName: '',
  description: '',
  status: 1,
  lastLoginTime: '',
  createTime: '',
  updateTime: ''
})

// 添加表单数据
const addForm = ref({
  avatar: '',
  username: '',
  password: '',
  roleName: 'USER', // 默认为普通用户
  description: '',
  status: 1
})

// 用于存储原始密码
const originalPassword = ref('')

// 根据角色名获取角色类型（element-plus tag类型）
const getRoleType = (roleName) => {
  switch (roleName) {
    case 'SUPER_ADMIN':
      return 'danger'  // 红色
    case 'ADMIN':
      return 'primary' // 蓝色
    case 'USER':
      return 'success' // 绿色
    default:
      return 'info'    // 灰色
  }
}

// 根据当前用户角色动态生成可选角色选项
const roleOptions = computed(() => {
  const options = [
    { label: "普通用户", value: "USER" },
    { label: "管理员", value: "ADMIN" }
  ];
  
  // 只有超级管理员才能分配超级管理员角色
  if (currentUser.value.roleName === 'SUPER_ADMIN') {
    options.unshift({ label: "超级管理员", value: "SUPER_ADMIN" });
  }
  
  return options;
});

// 根据当前用户角色过滤用户数据
// 用户列表只展示当前账号同级及以下的用户
const filterUsersByRole = (users) => {
  // 超级管理员可以看到所有用户
  if (currentUser.value.roleName === 'SUPER_ADMIN') {
    return users;
  }
  
  // 管理员只能看到管理员及以下的用户，看不到超级管理员
  if (currentUser.value.roleName === 'ADMIN') {
    return users.filter(user => user.roleName !== 'SUPER_ADMIN');
  }
  
  // 普通用户只能看到自己
  return users.filter(user => user.id === currentUser.value.id);
}

// 检查是否可以对用户进行操作（编辑、删除等）
// 只能对当前账号低一级的用户进行操作
const canOperate = (row) => {
  // 不能对自己进行操作
  if (row.id === currentUser.value.id) {
    return false;
  }

  const currentUserRole = currentUser.value.roleName;
  const targetUserRole = row.roleName;

  // 超级管理员可以操作管理员和普通用户，但不能操作其他超级管理员
  if (currentUserRole === 'SUPER_ADMIN') {
    return targetUserRole !== 'SUPER_ADMIN'; // 只能操作下级，不能操作同级
  }

  // 管理员只能操作普通用户
  if (currentUserRole === 'ADMIN') {
    return targetUserRole === 'USER';
  }

  // 普通用户不能操作其他用户
  return false;
}

// 计算属性：根据状态返回显示的数据
const tableData = computed(() => {
  let data;
  // 如果还没搜索过，显示所有数据
  if (!hasSearched.value) {
    data = originalTableData.value
  } else {
    // 如果搜索过，显示搜索结果
    data = searchResults.value
  }
  
  // 根据当前用户角色过滤数据
  return filterUsersByRole(data);
})

// 执行搜索
const performSearch = () => {
  loading.value = true

  // 模拟网络延迟
  setTimeout(() => {
    if (!input.value) {
      // 如果搜索关键字为空，显示所有数据
      searchResults.value = originalTableData.value
    } else {
      const keyword = input.value.toLowerCase().trim()
      searchResults.value = originalTableData.value.filter(item =>
        item.username.toLowerCase().includes(keyword) ||
        item.roleName.toLowerCase().includes(keyword) ||
        item.description.toLowerCase().includes(keyword)
      )
    }

    hasSearched.value = true
    loading.value = false
  }, 300) // 模拟300ms的网络延迟
}

// 处理搜索
const searchHandle = () => {
  performSearch()
}

// 处理回车键搜索
const handleKeyDown = (event) => {
  if (event.key === 'Enter') {
    performSearch()
  }
}

// 通用头像上传处理
const handleAvatarChange = (uploadFile, formType) => {
  // 将上传的文件保存到表单数据中
  if (formType === 'edit') {
    editForm.value.avatar = uploadFile.raw
  } else {
    addForm.value.avatar = uploadFile.raw
  }
}

// 处理编辑
const handleEdit = (row) => {
  if (!canOperate(row)) {
    ElMessage.warning('您没有权限编辑此用户')
    return
  }

  // 保存原始密码
  originalPassword.value = row.password

  // 初始化表单数据
  editForm.value = { ...row }
  // 清空密码字段，这样用户只有在想修改密码时才需要输入
  editForm.value.password = ''
  editForm.value.confirmPassword = ''

  // 重置显示原密码状态
  showOriginalPassword.value = false

  editDialog.value = true
}

// 切换原密码显示
const toggleOriginalPassword = () => {
  showOriginalPassword.value = !showOriginalPassword.value
}

// 表单验证
const validateForm = (form, formType) => {
  if (!form.username) {
    ElMessage.error('用户名不能为空')
    return false
  }
  
  // 添加表单或编辑表单中用户输入了密码时才验证密码相关字段
  if (formType === 'add' || form.password || form.confirmPassword) {
    if (!form.password) {
      ElMessage.error('密码不能为空')
      return false
    }
    
    if (form.password !== form.confirmPassword) {
      ElMessage.error('两次输入的密码不一致')
      return false
    }
  }
  
  return true
}

// 保存编辑
const saveEdit = () => {
  // 表单验证
  if (!validateForm(editForm.value, 'edit')) {
    return
  }
  
  // 模拟API调用保存用户信息
  const index = originalTableData.value.findIndex(item => item.id === editForm.value.id)
  if (index !== -1) {
    // 更新更新时间
    editForm.value.updateTime = new Date().toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false
    }).replace(/\//g, '-').replace(',', '');
    
    // 如果密码字段为空，则不更新密码
    let saveData;
    if (editForm.value.password) {
      // 用户输入了新密码，更新密码
      const { confirmPassword, ...data } = editForm.value
      saveData = { ...data }
    } else {
      // 用户未修改密码，保留原密码
      const { password, confirmPassword, ...data } = editForm.value
      saveData = { 
        ...data,
        password: originalTableData.value[index].password
      }
    }
    
    originalTableData.value[index] = { ...saveData }
    
    // 如果已经搜索过，也需要更新搜索结果
    if (hasSearched.value) {
      const searchIndex = searchResults.value.findIndex(item => item.id === editForm.value.id)
      if (searchIndex !== -1) {
        searchResults.value[searchIndex] = { ...saveData }
      }
    }
    
    ElMessage.success('用户信息更新成功')
  }
  
  // 关闭对话框
  editDialog.value = false
}

// 取消编辑
const cancelEdit = () => {
  editDialog.value = false
}

// 处理添加用户
const handleAdd = () => {
  // 重置表单数据
  addForm.value = {
    avatar: '',
    username: '',
    password: '',
    roleName: 'USER', // 默认为普通用户
    description: '',
    status: 1
  }
  addDialog.value = true
}

// 保存添加的用户
const saveAdd = () => {
  // 表单验证
  if (!validateForm(addForm.value, 'add')) {
    return
  }
  
  // 生成新的用户ID
  const newId = originalTableData.value.length > 0 
    ? Math.max(...originalTableData.value.map(item => item.id)) + 1 
    : 1
  
  // 生成创建时间和更新时间
  const currentTime = new Date().toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-').replace(',', '');
  
  // 构造新用户对象（不包含confirmPassword字段）
  const { confirmPassword, ...newUser } = addForm.value
  const user = {
    id: newId,
    ...newUser,
    lastLoginTime: currentTime,
    createTime: currentTime,
    updateTime: currentTime
  }
  
  // 添加到数据中
  originalTableData.value.push(user)
  
  // 如果已经搜索过，也需要更新搜索结果
  if (hasSearched.value) {
    searchResults.value.push(user)
  }
  
  ElMessage.success('用户添加成功')
  
  // 关闭对话框
  addDialog.value = false
}

// 取消添加
const cancelAdd = () => {
  addDialog.value = false
}

// 处理删除
const handleDelete = (row) => {
  if (!canOperate(row)) {
    ElMessage.warning('您没有权限删除此用户')
    return
  }

  ElMessageBox.confirm(
      `确定要删除用户 "${row.username}" 吗？此操作不可恢复。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    // 模拟API调用删除用户
    const index = originalTableData.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      originalTableData.value.splice(index, 1)
    }

    // 如果已经搜索过，也需要从搜索结果中移除
    if (hasSearched.value) {
      const searchIndex = searchResults.value.findIndex(item => item.id === row.id)
      if (searchIndex !== -1) {
        searchResults.value.splice(searchIndex, 1)
      }
    }

    ElMessage.success('用户删除成功')
  }).catch(() => {
    // 用户取消删除
    ElMessage.info('已取消删除')
  })
}

// 批量删除
const handleBatchDelete = () => {
  // 获取选中的行
  const selectedRows = tableRef.value.getSelectionRows()

  // 检查是否有选中的行
  if (selectedRows.length === 0) {
    ElMessage.warning('请至少选择一个用户进行删除')
    return
  }

  // 检查是否有不能操作的用户
  const unauthorizedRows = selectedRows.filter(row => !canOperate(row))
  if (unauthorizedRows.length > 0) {
    const names = unauthorizedRows.map(row => row.username).join('、')
    ElMessage.warning(`您没有权限删除以下用户：${names}`)
    return
  }

  // 确认删除
  ElMessageBox.confirm(
      `确定要删除选中的 ${selectedRows.length} 个用户吗？此操作不可恢复。`,
      '确认批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    // 删除选中的行
    selectedRows.forEach(row => {
      // 从原始数据中移除
      const index = originalTableData.value.findIndex(item => item.id === row.id)
      if (index !== -1) {
        originalTableData.value.splice(index, 1)
      }

      // 如果已经搜索过，也需要从搜索结果中移除
      if (hasSearched.value) {
        const searchIndex = searchResults.value.findIndex(item => item.id === row.id)
        if (searchIndex !== -1) {
          searchResults.value.splice(searchIndex, 1)
        }
      }
    })

    // 清除选中状态
    tableRef.value.clearSelection()

    ElMessage.success(`成功删除 ${selectedRows.length} 个用户`)
  }).catch(() => {
    // 用户取消删除
    ElMessage.info('已取消批量删除')
  })
}

// 获取头像路径
const getAvatarPath = (avatarData) => {
  // 处理空头像的情况，返回默认头像
  if (!avatarData) {
    // 使用项目中的默认头像，如果不存在则使用Element Plus的默认用户图标
    try {
      return new URL('../../assets/水獭.png', import.meta.url).href;
    } catch (error) {
      // 如果默认头像文件不存在，则返回空字符串，el-image会显示默认占位图
      return '';
    }
  }
  
  // 处理File对象（用户上传的文件）
  if (avatarData instanceof File) {
    return URL.createObjectURL(avatarData);
  }
  
  // 处理base64数据
  if (typeof avatarData === 'string' && avatarData.startsWith('data:image')) {
    return avatarData;
  }
  
  // 处理外部链接
  if (typeof avatarData === 'string' && (avatarData.startsWith('http://') || avatarData.startsWith('https://'))) {
    return avatarData;
  }
  
  // 处理项目内部资源（原始逻辑）
  if (typeof avatarData === 'string' && avatarData.startsWith('@/assets/')) {
    const fileName = avatarData.replace('@/assets/', '');
    return new URL(`../../assets/${fileName}`, import.meta.url).href;
  }
  
  // 默认情况，直接返回
  return avatarData;
}

// 格式化密码显示
const formatPassword = (password) => {
  if (!password) return ''
  return '*'.repeat(password.length)
}
</script>

<template>
  <div class="user-management-container">
    <el-card style="max-width:100%">
      <template #header>
        <div class="card-header">
          <el-input
            v-model="input"
            style="width: 250px"
            placeholder="请输入用户名/角色名/描述"
            @keydown="handleKeyDown"
          />
          <el-button
            style="margin-left: 10px"
            type="primary"
            @click="searchHandle"
            :loading="loading"
          >
            {{ loading ? '搜索中...' : '搜索' }}
          </el-button>
          <el-button type="success" @click="handleAdd">添加用户</el-button>
          <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
        </div>
      </template>

      <el-table
        :data="tableData"
        stripe
        height="500px"
        style="width: 100%"
        border="border"
        v-loading="loading"
        ref="tableRef"
      >
        <el-table-column type="selection" width="50px" align="center"/>
        <el-table-column prop="id" label="序号" width="70" fixed="left" align="center"/>
        <el-table-column prop="avatar" label="头像" width="80" fixed="left" align="center">
          <template #default="{row}">
            <el-image 
              :src="getAvatarPath(row.avatar)" 
              :preview-src-list="[getAvatarPath(row.avatar)]"
              fit="cover"
              style="width: 30px; height: 30px; border-radius: 50%"
              preview-teleported
            />
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="140"/>
        <el-table-column prop="password" label="密码" width="140">
          <template #default="{row}">
            {{ formatPassword(row.password) }}
          </template>
        </el-table-column>
        <el-table-column prop="roleName" label="角色" width="130">
          <template #default="{row}">
            <el-tag :type="getRoleType(row.roleName)">
              {{ row.roleName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" width="160"/>
        <el-table-column prop="status" label="状态" width="80" align="center">
          <template #default="{row}">
            <el-tag :type="row.status ? 'success' : 'danger'">
              {{ row.status ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastLoginTime" label="最后登录时间" width="185"/>
        <el-table-column prop="createTime" label="创建时间" width="185"/>
        <el-table-column prop="updateTime" label="更新时间" width="185"/>
        <el-table-column fixed="right" label="操作" min-width="140">
          <template #default="{row}">
            <el-button 
              link 
              type="primary" 
              size="small"
              :disabled="!canOperate(row)"
              @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button 
              link 
              type="danger" 
              size="small"
              :disabled="!canOperate(row)"
              @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog v-model="editDialog" width="550" title="编辑用户" @close="cancelEdit">
      <el-form :model="editForm" label-width="auto">
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            drag
            :show-file-list="false"
            :on-change="(file) => handleAvatarChange(file, 'edit')"
            :auto-upload="false"
          >
            <el-image 
              v-if="editForm.avatar"
              :src="getAvatarPath(editForm.avatar)" 
              fit="cover"
              style="width: 80px; height: 80px; border-radius: 50%"
            />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
            <div class="el-upload__text" v-if="!editForm.avatar">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码">
          <div style="display: flex; width: 100%">
            <el-input 
              v-model="editForm.password" 
              :type="showOriginalPassword ? 'text' : 'password'" 
              show-password 
              :placeholder="showOriginalPassword ? originalPassword : '留空则不修改密码'" 
              style="flex: 1"
            />
            <el-button 
              style="margin-left: 10px" 
              @click="toggleOriginalPassword"
            >
              <el-icon>
                <View />
              </el-icon>
              {{ showOriginalPassword ? '隐藏' : '显示原密码' }}
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="确认密码" v-if="editForm.password">
          <el-input
              v-model="editForm.confirmPassword"
              type="password"
              placeholder="请再次输入密码" show-password
          />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="editForm.roleName" placeholder="请选择角色">
            <el-option
              v-for="option in roleOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
              v-model="editForm.description"
              type="textarea"
              :rows="2"
              placeholder="请输入用户备注信息"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch 
            v-model="editForm.status" 
            :active-value="1" 
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 添加对话框 -->
    <el-dialog v-model="addDialog" width="550" title="添加用户" @close="cancelAdd">
      <el-form :model="addForm" label-width="auto">
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            drag
            :show-file-list="false"
            :on-change="(file) => handleAvatarChange(file, 'add')"
            :auto-upload="false"
          >
            <el-image 
              v-if="addForm.avatar"
              :src="getAvatarPath(addForm.avatar)" 
              fit="cover"
              style="width: 80px; height: 80px; border-radius: 50%"
            />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
            <div class="el-upload__text" v-if="!addForm.avatar">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="addForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="addForm.password" type="password" show-password placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
              v-model="addForm.confirmPassword"
              type="password"
              placeholder="请再次输入密码" show-password
          />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="addForm.roleName" placeholder="请选择角色">
            <el-option
              v-for="option in roleOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
              v-model="addForm.description"
              type="textarea"
              :rows="2"
              placeholder="请输入用户备注信息"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch 
            v-model="addForm.status" 
            :active-value="1" 
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAdd">取消</el-button>
          <el-button type="primary" @click="saveAdd">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.card-header {
  display: flex;
  flex-wrap: nowrap;
}

.avatar-uploader {
  width: 100%;
}

.avatar-uploader :deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 100%;
}

.avatar-uploader :deep(.el-upload:hover) {
  border-color: var(--el-color-primary);
}

.avatar-uploader .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}

.el-upload__text {
  color: #606266;
  font-size: 14px;
  text-align: center;
  padding: 10px 0;
}
</style>